<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="反馈内容">
        <el-input size="small" v-model="formInline.note" placeholder="搜索反馈内容"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input size="small" v-model="formInline.usr_name" placeholder="搜索用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :empty-text="emptyText"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="NOTE" label="反馈内容"></el-table-column>
      <el-table-column prop="CREATED_TIME" label="反馈时间" :formatter="Datetime"></el-table-column>
      <el-table-column fixed prop="USR_NAME" label="用户名"></el-table-column>
      <el-table-column prop="URL" label="url地址"></el-table-column>
      <el-table-column fixed="right" label="查看">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看图片" placement="top-start">
            <el-popover placement="left" trigger="click" >
              <img :src="scope.row.IMG" alt="" style="width:1200px">
                <el-button slot="reference" type="primary" size="small">
                  <i class="el-icon-view"></i>
                </el-button>
            </el-popover>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="del(scope.row.OBJECT_ID)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
  </Main>
</template>
<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { baseUrl,timeFormat } from "@/config/env";
import Add from "./add";
import Edit from "./edit";

const urls = {
  delete: baseUrl + "/suggestions/suggestions/delete",
  list: baseUrl + "/suggestions/suggestions/list"
};
export default {
  methods: {
    getFocus(e) {
      console.log(this.startTime)
      console.log(e)
    },
    sortChange(column, prop, order) {
      column.prop = "USR_NAME";
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    Datetime(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.CREATED_TIME) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show();
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId);
    },
    del: function(objectId) {
      this.$confirm("确认要删除该反馈吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch() {
      axios.post(urls.list, this.formInline).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据";
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [], // 排序
        sorter: {},
        usr_name : null,
        note : null,
        created_time : "",
        startTime :"",
        endTime : ""
      },
      tableData: [],
      emptyText : "加载中...",
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page
  }
};
</script>
